<template>
  <div>
    <van-popup
      v-model="MusicListShow"
      @closeable="closeMusicList"
      ref="top"
      position="right"
      @opened="getCurrentDate(MusicListContent.id)"
      :style="
        `background-color:rgba(${MusicListContent.bgc[0]},${MusicListContent.bgc[1]},${MusicListContent.bgc[2]},${MusicListContent.bgc[3]})`
      "
    >
      <van-nav-bar
        title="排行榜"
        @click-left="closeMusicList"
        left-arrow
        class="navBar"
      >
        <template #right>
          <van-icon name="music" size="18" />
        </template>
      </van-nav-bar>
      <van-pull-refresh
        v-model="refreshing"
        pulling-text=""
        @refresh="onRefresh"
      >
        <van-row
          type="flex"
          align="center"
          justify="center"
          style="margin:20px 0;"
        >
          <van-col span="12" type="flex" justify="center" align="center">
            <img
              :src="MusicListContent.coverImgUrl"
              alt=""
              style="width: 115px; height: 120px;"
              crossOrigin="anonymous"
            />
            <div class="imgFontStyle">
              {{ MusicListContent.updateFrequency }}
            </div>
          </van-col>
        </van-row>
        <van-row type="flex" align="center" justify="center">
          <van-col span="5" type="flex" justify="center" align="center">
            <van-row><van-icon name="chat-o" size="28"/></van-row>
            <van-row>
              <span class="imgFontStyle">
                {{ playlist.commentCount | fontFormat }}
              </span>
            </van-row>
          </van-col>
          <van-col span="5" type="flex" justify="center" align="center">
            <van-row><van-icon name="share-o" size="28"/></van-row>
            <van-row
              ><span class="imgFontStyle"
                >分享({{ playlist.shareCount | fontFormat }})</span
              ></van-row
            >
          </van-col>
          <van-col span="5" type="flex" justify="center" align="center">
            <van-row><van-icon name="down" size="28"/></van-row>
            <van-row><span class="imgFontStyle">下载</span></van-row>
          </van-col>
          <van-col span="5" type="flex" justify="center" align="center">
            <van-row><van-icon name="certificate" size="28"/></van-row>
            <van-row><span class="imgFontStyle">多选</span></van-row>
          </van-col>
        </van-row>
        <van-sticky z-index="9999">
          <van-row
            style="background-color: #fff; border-top-left-radius:10px; border-top-right-radius:20px; margin-top:20px;"
          >
            <van-col
              span="17"
              style="font-size: 16px; line-height:50px; border-top-right-radius:20px;padding-left:20px;"
            >
              播放全部<span>(100)</span>
            </van-col>
            <van-col
              span="7"
              type="flex"
              justify="center"
              style="font-size: 14px; line-height:50px; background-color:#E4463B;text-align: center;border-top-right-radius:20px;color:#fff;"
            >
              + 收藏 ({{ MusicListContent.subscribedCount | fontFormat }})
            </van-col>
          </van-row>
        </van-sticky>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell
            v-for="(item, index) in CurrentDate"
            :key="item.id"
            :label="item.ar[0].name"
            @click="sing(item.id)"
          >
            <template #title>
              <span :class="{ fontRed: index < 3 }">{{ index + 1 }}</span>
              &nbsp;&nbsp;&nbsp;
              <span>{{ item.name }}</span>
            </template>
            <template #right-icon>
              <van-icon class="ellipsis" name="ellipsis" />
            </template>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </van-popup>
  </div>
</template>

<script>
import { getCurrentDate } from '@/api/RankingList'
export default {
  props: {
    MusicListShow: {
      type: Boolean,
      default: true
    },
    MusicListContent: {
      type: Object,
      require: true
    }
  },
  data () {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      CurrentDate: {},
      playlist: 0 // 评论数
    }
  },
  created () {},
  beforeMount () {},
  mounted () {},
  filters: {
    fontFormat: function (value) {
      if (parseInt(value) < 10000) {
        return value
      } else {
        return parseInt(parseInt(value) / 10000) + '万'
      }
    }
  },
  methods: {
    closeMusicList () {
      this.$emit('update:MusicListShow', false)
    },
    closeOutput () {
      // console.log(document.querySelector('.van-popup'))
    },
    onLoad () {},
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    async getCurrentDate (id) {
      const { playlist } = await getCurrentDate({ id })
      this.playlist = playlist
      this.CurrentDate = playlist.tracks
    },
    sing (id) {
      console.log(id)
      this.$router.push('/play' + id)
    }
  }
}
</script>

<style scoped lang="less">
.van-popup {
  height: 100%;
  width: 100%;
  z-index: 2004;
  .fontRed {
    color: red;
  }
  /deep/.navBar {
    background-color: rgba(0, 0, 0, 0);
  }
  /deep/.imgFontStyle {
    white-space: nowrap;
    color: white;
    font-size: 32px;
  }
  /deep/.van-pull-refresh__head {
    display: none;
  }
  .ellipsis {
    color: black !important;
  }
}
</style>
